<template>
	<div class="Address">
		<div class="title_div">
			<img @click="dj()" src="../assets/orders/f.png" />
			<span>管理收货地址</span>
			<router-link to="/addressadd">新建</router-link>
		</div>
		<div class="Wz_div">
			<span>我的收货地址</span>
		</div>
		<div class="boder_div" v-for="item in dataList">
			<div class="boder_top_div">
				<span>{{item.shopNane}}</span>
				<span>{{item.tel}}</span>
			</div>
			<div class="boder_z_div">
				<p>{{item.texts}}</p>
				<img @click="bj()" src="../assets/orders/D70CE988-F9F8-4e9e-963E-07C692733DE8.png"/>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				dataList:[
					{"shopNane":"沃尔玛","tel":"1585582883","texts":"北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 10层 ",icons:[
						require("../assets/orders/icon_order.png")
						]},
						{"shopNane":"习得了","tel":"2355558265","texts":"北京市海淀区西三环北路 2号院 北京理工大学 国防科技园2号楼 13层 ",icons:[
							require("../assets/orders/icon_order.png")
							]}
				]
			}
		},
		methods:{
			dj(){
				this.$router.push("/home/mine")
			},
			bj(){
				this.$router.push("/addressedit")
			}
		}
	}
</script>

<style Lang="less" scoped>
	.Address{
		background-color: #f8f8f8;
		height: 100%;
		position: fixed;
		width: 100%;
	}
	.title_div{
		display: flex;
		justify-content: space-between;
		padding-left: 10px;
		padding-right: 10px;
		background: white;
		height: 32px;
		align-items: center;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	.title_div :nth-child(1){
		height: 16px;
		width: 9px;
		color: #B6B6B6;
	}
	.title_div :nth-child(2){
		font-size: 16px;
		color: #333333;
	}
	.title_div :nth-child(3){
		font-size: 14px;
		color: #333333;
	}
	.Wz_div{
		font-size: 14px;
		color: #333333;
		padding-top: 10px;
	}
	.Wz_div span{
		display: flex;
		justify-content: start;
		padding-left: 20px;
	}
	.boder_div{
		background: #FFFFFF;
		margin-top: 10px;
		margin-left: 18px;
		margin-right: 18px;
		border-radius: 4px;
		padding-left: 16px;
		padding-right: 16px;
		height: 104px;
	}
	.boder_div .boder_top_div{
		display: flex;
		justify-content: start;
		font-size: 14px;
		color: #999999;
		line-height: 40px;
		align-items: center;
	}
	.boder_div .boder_top_div :nth-child(2){
		font-size: 14px;
		color: #999999;
		padding-left: 20px;
	} 
	.boder_z_div{
		display: flex;
		justify-content: space-between;
		height: 40px;
		font-size: 14px;
		color: #333333;
		text-align: left;
		
	}
	.boder_z_div :nth-child(1){
		flex: 25;
		width: 300px;
	}
	.boder_z_div :nth-child(2){
		flex: 1;
		padding-left: 20px;
	}
</style>
